<template>
  <div style="display: flex">
    <div id="main" class="echart-pie" style="min-width: calc(100vw - 250px);height:950px;padding-left: 30px"></div>`
  </div>

</template>

<script>
// import * as echarts from 'echarts';
import * as echarts from 'echarts/lib/echarts';
import request from "@/utils/request";

const option = {
  title: {
    text: '藏品信息饼图',
    subtext:'',
    textStyle:{
      fontSize:30,
    },
    itemGap:20,
    left:'left'
  },
  //悬浮提示框
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)',
    textStyle:{
      fontSize:30,
      fontWeight:40,
      color:'#30cee3'
    },
  },
  legend: {
    // borderHeight:'40',
    orient:'vertical', //设置图例朝向
    x:'left',
    y:'center',
    // itemHeight:10,
    textStyle:{
      fontSize:25,
      fontWeight:40,
      color:'#30cee3'
    },
    data: []
  },
  toolbox:{
    show:true,
    feature: {
      // dataZoom: {
      //   yAxisIndex: 'none'
      // },
      dataView: { readOnly: false },
      // magicType: { type: ['line', 'bar'] },
      restore: {},
      saveAsImage: {}
    }
  },
  series: [
    {
      name: '馆区',
      type: 'pie',
      selectedMode: 'single',
      radius: [0, '45%'],
      label: {
        position: 'inner',
        fontSize: 35
      },
      labelLine: {
        show: false
      },
      data: []
    },
    {
      name: '藏品类别',
      type: 'pie',
      radius: ['55%', '70%'],
      labelLine: {
        length: 30,
      },
      label: {
        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
        backgroundColor: '#F6F8FC',
        borderColor: '#8C8D8E',
        borderWidth: 1,
        borderRadius: 4,
        fontSize: 20,
        rich: {
          a: {
            color: '#6E7079',
            lineHeight: 22,
            align: 'center'
          },
          hr: {
            borderColor: '#8C8D8E',
            width: '100%',
            borderWidth: 1,
            height: 0
          },
          b: {
            color: '#4C5058',
            fontSize: 14,
            fontWeight: 'bold',
            lineHeight: 33
          },
          per: {
            color: '#fff',
            backgroundColor: '#4C5058',
            padding: [3, 4],
            borderRadius: 4
          }
        }
      },
      data: []
    }
  ]
};

export default {
  name: "peiChart",
  components:{},
  data(){
    return{
      collectionsList:[],
      total: 0,
      lineBox:null,//初始化作用
      params: {
        pageNum: 1,
        pageSize: 1000,
        name: '',
        era:'',
        area:''
      },
    }
  },
  mounted() {
    this.lineBox = echarts.init(document.getElementById('main'))
    this.initEchart()
  },
  methods:{
    initEchart(){
      request.get('/collections/page',{
        params:this.params
      }).then(res => {
        if(res.code === '200') {
          const bigList = {},smallList = {}
          this.collectionsList = res.data.list
          this.total = res.data.total
          //来一个循环判断
          if(!this.lineBox){
            // 初始化echarts容器
            console.log("这里未初始化")
          }else {
            this.collectionsList.forEach((item) => {
              //第一个肯定是没数据的
              if(bigList[item.area]){
                bigList[item.area] ++
              } else {
                bigList[item.area] = 1
              }

              if(smallList[item.categoryName]){
                smallList[item.categoryName] ++
              } else {
                smallList[item.categoryName] = 1
              }
              option.legend.data.push(item.area)

              const bigNewList = []
              for(let i=0;i<Object.keys(bigList).length;i++){
                const value = {
                  name:Object.keys(bigList)[i],
                  value:Object.values(bigList)[i]
                }
                bigNewList.push(value)
              }

              const smallNewList = []
              for(let i=0;i<Object.keys(smallList).length;i++){
                const value = {
                  name:Object.keys(smallList)[i],
                  value:Object.values(smallList)[i]
                }
                smallNewList.push(value)
              }
              // console.log("smallNewList内容是",smallNewList)
              option.series[0].data = bigNewList
              option.series[1].data =smallNewList
            })
          }
          this.lineBox.setOption(option);
        }
      })
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.lineBox.resize();
      });
    }
  }
}

</script>

<style scoped>
.echart-pie{
  /*margin-bottom: 30px;*/
  padding-top: 50px;
}
</style>